<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>新闻列表页面</title>		
		<meta http-equiv="Access-Control-Allow-Origin" content="">
		<meta http-equiv="content-security-policy">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />		
		<link href="mui/css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="styles/public.css" />
		<script src="mui/js/mui.js"  type="text/javascript"  charset="UTF-8"></script>
		<style type="text/css">			
			.title {
				margin:8px 0;
				text-align: center;
				color:#FFFFFF;
				font-size: 20px;
			}
			.menu-name {
				padding-left: 15px;
				font-size: 16px;
				background-color:#3b3b3b;
				color: #FFFFFF;
				height: 43px;
				line-height: 43px;
			}
		</style>
	</head>
	<body>
		<!--描述：底部选项卡-->        
		<nav class="mui-bar mui-bar-tab" id="footer">				
			<a class="mui-tab-item mui-active" href="index.html" title="">
				<span class="mui-icon fico0"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a id="tab2" class="mui-tab-item" href="list.html?categoryID=2" title="工作动态">
				<span class="mui-icon fico5"></span>
				<span class="mui-tab-label">工作动态</span>
			</a>
			<a  id="tab50" class="mui-tab-item" href="list.html?categoryID=50" title="办事指南">
				<span class="mui-icon fico2"></span>
				<span class="mui-tab-label">办事指南</span>
			</a>
			<a  id="tab51" class="mui-tab-item" href="qualityAqi.html">
				<span class="mui-icon fico3"></span>
				<span class="mui-tab-label">空气质量</span>
			</a>
			<a id="tab60" class="mui-tab-item" href="list.html?categoryID=60" title="行政概况">
				<span class="mui-icon fico4"></span>
				<span class="mui-tab-label">行政概况</span>
			</a>
		</nav>
			
		<!-- 侧滑导航根容器 -->
		<div class="mui-off-canvas-wrap mui-draggable" id="offCanvasWrapper">
		 	<!-- 菜单容器 -->		 	
		 	<aside class="mui-off-canvas-left">
		 		<div class="mui-scroll-wrapper">
		 			<div class="mui-scroll">		 				
		 				<div class="title">
							<img src="img/logo-mini.png" style="vertical-align: middle;">&nbsp;							
							井冈山智慧社区
						</div>		 				
		 				<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
		 					<li class="mui-table-view-cell">
		 						<a href="index.html" class="mui-navigate-right mui-ellipsis">
		 							<span class="mui-icon mui-icon-home"></span> 
		 							首页		 							
		 						</a>
		 					</li>		 					
		 					<li class="mui-table-view-cell">
		 						<a href="list.html?categoryID=4" class="mui-navigate-right mui-ellipsis">		 							
		 							环保公文		 							
		 						</a>
		 					</li>
		 					<li class="mui-table-view-cell">
		 						<a href="list.html?categoryID=3" class="mui-navigate-right mui-ellipsis">		 							
		 							环保公告		 							
		 						</a>
		 					</li>	
		 					<li class="mui-table-view-cell">
		 						<a href="list.html?categoryID=2" class="mui-navigate-right mui-ellipsis">		 							
		 							工作动态		 							
		 						</a>
		 					</li>	
		 					<li class="mui-table-view-cell">
		 						<a href="list.html?categoryID=33" class="mui-navigate-right mui-ellipsis">		 							
		 							行政审批	 							
		 						</a>
		 					</li>							 				
		 					<li class="mui-table-view-cell">
		 						<a href="list.html?categoryID=60" class="mui-navigate-right mui-ellipsis">		 							
		 							行政概况						
		 						</a>
		 					</li>
		 					<li class="mui-table-view-cell">
		 						<a href="list.html?categoryID=50" class="mui-navigate-right mui-ellipsis">		 							
		 							办事指南	 							
		 						</a>
		 					</li>
		 					<li class="mui-table-view-cell">
		 						<a href="qualityAqi.html" class="mui-navigate-right mui-ellipsis">		 							
		 							空气质量 							
		 						</a>
		 					</li>
		 				</ul>
		 			</div>
		 		</div>
		 	</aside>
		 	<!-- 主页面容器 -->
		 	<div class="mui-inner-wrap">
		 		<!-- 主页面标题 -->
		 		<header class="mui-bar mui-bar-nav">
		 			<a class="mui-icon mui-icon-back mui-pull-left mui-action-back"></a>
		 			<a id="offCanvasShow" href="#offCanvasSide" class="mui-icon mui-icon-bars mui-pull-right mui-action-menu"></a>
		 			<h1 class="mui-title">井冈山智慧社区-新闻列表</h1>
		 		</header>
		 		 <!-- 主界面具体展示内容 -->
		 		<div id="pullrefresh" class="mui-content mui-scroll-wrapper" style="padding-top:55px;">
		 			<div class="mui-scroll">
		 				<!--<div class="mui-input-row mui-search">
            				<input id="searchKey" type="search"  placeholder="搜索">
        				</div>		 				-->
	 					<ul id="news-list" class="mui-table-view kr-table-view" >		 				    
	 					</ul>
		 			</div>	
		 			<div class="mui-loader srm-loader" id="loading">加载中...</div>
		 		</div>		 		
		 		<div class="mui-backdrop" style="display:none;"></div>
		 	</div>
		 	
		</div>
		<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>	
		<script type="text/javascript" src="common.js" ></script>
		<script type="text/javascript" charset="UTF-8">			 	
		  	var pageNo = 1;
            var hasMore = true;
            var categoryID="45"; 
            
            $(function () {				
				var xx = $.getUrlParam('categoryID');	
			  	categoryID=xx;			
			  	//底部导航中隐藏相应的栏目
			  	$("#tab"+xx).hide();
			  	if(window.localStorage){
			  		$(".mui-title").html(localStorage.getItem("title"));
			  	}
			});			
            
			mui.init({
				pullRefresh:{
					container:"#pullrefresh",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
					down:{
						contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
                      	contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
                      	contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容					
                      	callback :pulldownRefresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；						 
					},
					up:{
						contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
                      	contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
                      	callback :loadMore //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；                      	
					}					
				}
			});
			
			mui.ready(function() {
				//侧滑容器父节点
				var offCanvasWrapper = mui('#offCanvasWrapper');
				document.getElementById('offCanvasShow').addEventListener('tap', function() {
					offCanvasWrapper.offCanvas('show');
					$('.mui-backdrop').show();
					mui('.mui-off-canvas-wrap').offCanvas('show');
				});
				
				$('.mui-backdrop').on('tap',function(){
					$('.mui-backdrop').hide();
					offCanvasWrapper.offCanvas('close');
				});				
			});
			
			//添加链接
			mui('#footer').on('tap','a',function(e){
				if(window.localStorage){
					localStorage.removeItem("title");//清除c的值
					localStorage.setItem("title",this.getAttribute('title'));
				}
				mui.openWindow({
					url: this.getAttribute('href'),
					id: 'list'
				});
			})
			
			function makeHtml(pageNo,clearData){               
                var url=Base_URL+"/SiteIndex/queryArticlePageAPP.json?categoryID="+categoryID;			
                $.ajax({
               		type: "post",
               		url:url,            
               		data:{
						currPageNum:pageNo,
						pageRowSize:pageSize
					},
               		dataType:"jsonp",
               		scriptCharset: 'utf-8',
               		jsonp: "callback",
               		success: function(data){                  			
                    	if(data!=null && data.rows.length>0){  
							var htmlData =' ';								
							var rowcount = data.rows.length;							
							for (var i = 0; i < rowcount; i++) {										  
								 htmlData += '<li class="mui-table-view-cell mui-media" id="'+data.rows[i].id+'"><a href="#">'+
								 '<div class="mui-media-body">'+data.rows[i].title+
								 '<p class="kr-time" >'+new Date(data.rows[i].modifyDate).pattern("yyyy-MM-dd HH:mm")+'</p></div></a></li>';								 								 
							}																													
						}else{
							htmlData = '<li class="mui-table-view-cell crm-text-align">暂无数据</li';
                        }  
                        
                        var loading = document.getElementById("loading");
                        if(loading){
                            document.getElementById("pullrefresh").removeChild(loading);
                        }

                        if(clearData){
                            jQuery('#news-list').html(htmlData);
                        }else{
                            jQuery('#news-list').append(htmlData);
                        }                        
                        
                        mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); 
                        
                        if(data.hasNextPage){
                            mui('#pullrefresh').pullRefresh().refresh(true);
                            mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
                        }else{
                            hasMore = false;
                            mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
                        }                        
               		},
	                error:function(){ 
	                	mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
                        mui('#pullrefresh').pullRefresh().endPulldownToRefresh();                       
						console.log("获取新闻列表出现异常");
	                }
            	});
            }
			
			function pulldownRefresh(){
                mui('#pullrefresh').pullRefresh().refresh(true);
                hasMore = true;
                pageNo = 1;
                makeHtml(1,true);                
            }
            
            function loadMore(){
                if(hasMore){
                    pageNo++;
                    makeHtml(pageNo,false);
                }else{
                    mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
                }
            }

            if (mui.os.plus) {
                mui.plusReady(function() {
                    setTimeout(function() {
                        pulldownRefresh();
                    }, 1000);
                });
            } else {
                mui.ready(function() {
                    pulldownRefresh();
                });
            }
            
            //新闻列表中 li 的点击事件
			mui("#news-list.mui-table-view").on('tap','.mui-table-view-cell',function(){
			  //获取id
			  var id = this.getAttribute("id");
			  //传值给详情页面，通知加载新数据			 
			  //打开新闻详情
			  mui.openWindow({
			    id:'detail',
			    url:'detail.html?id='+id			   
			  });
			}) 	
			
			
			
		</script>
	</body>
</html>
